import { NavLink, NavLinkProps, useLocation, useNavigate } from "react-router-dom";

interface RouteNavLinkProps extends NavLinkProps {
    fullpath: string
}

const RouteNavLink: React.FC<RouteNavLinkProps>  = (props) => {
    const { children } = props;
    const location = useLocation();
    const navigate = useNavigate();

    function linkClickHandle(e: React.MouseEvent) {
        e.preventDefault();
        if (location.pathname === props.fullpath) {
            return;
        }
        navigate(props.to);
    }

    return (
        <NavLink 
            {...props}
            onClick={linkClickHandle}
        >
            { children }
        </NavLink>
    )
}

export default RouteNavLink;

